<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="common/header :: head"></head>
<!-- 服务器监控 -->
<body>
<div id="app-container">
    <el-row style="width: 95%;margin: 0 auto;">
        <el-col :span="11" class="card-box">
            <el-card>
                <div slot="header"><span><i class="el-icon-cpu"></i> CPU</span></div>
                <div class="el-table el-table--enable-row-hover el-table--medium">
                    <table cellspacing="0" style="width: 100%;">
                        <thead>
                        <tr>
                            <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                            <th class="el-table__cell is-leaf"><div class="cell">值</div></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="el-table__cell is-leaf"><div class="cell">核心数</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
                        </tr>
                        <tr>
                            <td class="el-table__cell is-leaf"><div class="cell">用户使用率</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
                        </tr>
                        <tr>
                            <td class="el-table__cell is-leaf"><div class="cell">系统使用率</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
                        </tr>
                        <tr>
                            <td class="el-table__cell is-leaf"><div class="cell">当前空闲率</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </el-card>
        </el-col>
        <el-col :span="11" class="card-box" style="margin-left: 30px;">
            <el-card>
                <div slot="header"><span><i class="el-icon-tickets"></i> 内存</span></div>
                <div class="el-table el-table--enable-row-hover el-table--medium">
                    <table cellspacing="0" style="width: 100%;">
                        <thead>
                        <tr>
                            <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
                            <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
                            <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
                        </tr>
                        <tr>
                            <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.used}}G</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.used}}M</div></td>
                        </tr>
                        <tr>
                            <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
                        </tr>
                        <tr>
                            <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </el-card>
        </el-col>
        <el-col :span="23" class="card-box" style="margin-top: 20px;">
            <el-card>
                <div slot="header">
                    <span><i class="el-icon-receiving"></i> 磁盘状态</span>
                </div>
                <div class="el-table el-table--enable-row-hover el-table--medium">
                    <table cellspacing="0" style="width: 100%;">
                        <thead>
                        <tr>
                            <th class="el-table__cell el-table__cell is-leaf"><div class="cell">盘符路径</div></th>
                            <th class="el-table__cell is-leaf"><div class="cell">文件系统</div></th>
                            <th class="el-table__cell is-leaf"><div class="cell">盘符类型</div></th>
                            <th class="el-table__cell is-leaf"><div class="cell">总大小</div></th>
                            <th class="el-table__cell is-leaf"><div class="cell">可用大小</div></th>
                            <th class="el-table__cell is-leaf"><div class="cell">已用大小</div></th>
                            <th class="el-table__cell is-leaf"><div class="cell">已用百分比</div></th>
                        </tr>
                        </thead>
                        <tbody v-if="server.sysFiles">
                        <tr v-for="(sysFile, index) in server.sysFiles" :key="index">
                            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.dirName }}</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.sysTypeName }}</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.typeName }}</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.total }}</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.free }}</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell">{{ sysFile.used }}</div></td>
                            <td class="el-table__cell is-leaf"><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app-container",
        data: {
            // 服务器信息
            server: []
        }, methods: {
            /** 查询服务器信息 */
            getList() {
                axios.get('../monitor/server').then(res=>{
                    if(res.data.code == 1){
                        this.server = res.data.data;
                    }else{
                        this.$message({message: res.data.msg, type: "error"});
                    }
                })
            },
            // 打开加载层
            openLoading() {
                this.$modal.loading("正在加载服务监控数据，请稍候！");
            }
        },mounted: function () {
            this.getList();
        }
    })
</script>
</body>
</html>